import React from 'react'
import ReactDOM from 'react-dom'
import { Map, Markers, Marker } from 'react-amap'
import DelivererPic from '../img/deliverer.png'

const _key = 'ceda2bce39081ea385b2c5d35484c5b0'

export const DelivererMarkerRender = (props) => {
    return (
        <div style={{
            textAlign: 'center',
            width: 'max-content',
            transform: 'translate(calc(-50% + 9.5px),calc(-100% + 33px))'
        }}>
            <div style={{ marginBottom: '10px' }}>
                <span style={{
                    textAlign: 'center',
                    backgroundColor: 'white',
                    border: '2px dodgerblue solid',
                    padding: '0 5px',
                    borderRadius: '4px'
                }}>{props.label}</span>
            </div>
            <img src={DelivererPic} width="50px"></img>
        </div>
    )
}

export class ShopMarkerRender extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div style={{
                border: '1px solid #000',
                color: 'white',
                backgroundColor: 'black',
                padding: '5px',
                width: 'max-content'
            }}>
                {this.props.label}
            </div>
        )
    }

}

export class DisplayMap extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            useCluster: false
        }

        let points = props.points
        console.log(points);

        this.markers = []

        points.forEach(p => {
            if (p != '') {
                this.markers.push({
                    position: {
                        longitude: p.lng,
                        latitude: p.lat
                    },
                    render: p.render
                })
            }
        })

    }

    render() {
        let mk = this.markers.map(marker => {
            return (
                <Marker
                    position={marker.position}
                    render={marker.render}
                    key={"marker-" + this.markers.indexOf(marker)}
                ></Marker>
            )
        })

        return (
            <div id="amap" style={{ width: '100%', height: '500px', margin: '15px 0' }}>
                <Map amapkey={_key} zoom={15} center={this.markers[0].position}>
                    {mk}
                </Map>
            </div>
        )
    }
}

export class SelectMap extends React.Component {
    constructor(props) {
        super(props)

        window.onload = (e) => {
            console.log(document.getElementById('selmap'));
            const frameObj = document.getElementById('selmap')
            frameObj.contentWindow.postMessage('hello', 'https://m.amap.com/picker/')
        }
        window.addEventListener("message", function (e) {
            console.log(e);

            props.handlePosition(e.data)
        }, false)
    }

    render() {
        return (
            <div>
                <iframe
                    src={"https://m.amap.com/picker/?key=" + _key}
                    width="100%"
                    height="600px"
                    id="selmap"
                ></iframe>
            </div>
        )
    }
}